<template>
  <div>
    <h3>周考二列表展示</h3>
    <div>
      姓名:<input type="text" v-model="info.workName" /> 员工编号:<input
        type="text"
        v-model="info.code"
      />
      状态:<select v-model="info.state">
        <option value="">请选择</option>
        <option :value="true">开启</option>
        <option :value="false">关闭</option>
      </select>
      <input type="button" value="查询" class="btn btn-primary" @click="show" />
      <input type="button" value="重置" class="btn btn-info" @click="reset" />
      <input
        type="button"
        value="批量删除"
        class="btn btn-danger"
        @click="delAll"
      />
    </div>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td><input type="checkbox" v-model="checked" @click="checkAll" /></td>
          <td>Id</td>
          <td>员工名称</td>
          <td>员工编号</td>
          <td>员工头像</td>
          <td>状态</td>
          <td>创建时间</td>
          <td>操作</td>
        </tr>
        <tr v-for="item in data.list">
          <td><input type="checkbox" v-model="ids" :value="item.Id" /></td>
          <td>{{ item.Id }}</td>
          <td>{{ item.WorkName }}</td>
          <td>{{ item.Code }}</td>
          <td>
            <img :src="item.Photo" width="100" height="100" alt="" />
          </td>
          <td>{{ item.State == true ? '开启' : '关闭' }}</td>
          <td>{{ moment(item.CreateTime).format('YYYY-MM-DD hh:mm:ss') }}</td>
          <td>
            <input
              type="button"
              value="修改"
              class="btn btn-primary"
              @click="update(item.Id)"
            />
            <input
              type="button"
              value="删除"
              class="btn btn-danger"
              @click="del(item.Id)"
            />
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <!-- 显示数据 -->
      <span
        >共<b>{{ data.totalCount }}</b
        >条</span
      >

      <span
        >每页<b>{{ info.pageSize }}</b
        >条</span
      >
      <span
        >共<b>{{ info.pageIndex }}/{{ data.totalPage }}</b
        >页</span
      >

      <!-- 改变页码 -->

      <input type="button" value="首页" @click="goPage(1)" />
      <input type="button" value="上一页" @click="goPage(info.pageIndex - 1)" />

      <span v-for="item in data.totalPage" @click="goPage(item)">{{
        item
      }}</span>

      <input type="button" value="下一页" @click="goPage(info.pageIndex + 1)" />
      <input type="button" value="尾页" @click="goPage(data.totalPage)" />
      <input type="number" v-model="info.pageIndex" />
      <input
        type="button"
        value="跳转"
        class="btn btn-warning"
        @click="goPage(info.pageIndex)"
      />

      <!-- 改变页容量 -->
      <select v-model="info.pageSize" @change="show">
        <option :value="item" v-for="item in arr">每页{{ item }}条</option>
      </select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

//获取员工列表向后端传递的参数(查询条件)
let info: any = reactive({
  pageIndex: 1,
  pageSize: 2,
  workName: '',
  code: '',
  state: '',
});

//接受后端返回的数据
let data: any = reactive({
  totalCount: 0,
  totalPage: 0,
  list: [],
});

//声明一个变量存储页容量
const arr: any = ref([2, 4, 6, 8]);

//声明一个变量存储控制单个复选框选中与未选中 声明成布尔类型
const checked: any = ref(false);
//声明一个变量存储控制多个复选框选中与未选中 声明成数组
let ids: any = ref([]);

onMounted(() => {
  getTestList();
});
//1.修改跳转并且传参
const update = (id: any) => {
  router.push({
    path: '/testUpdate',
    query: {
      id: id,
    },
  });
};

//删除
const del = (id: any) => {
  //1.友好
  let f = confirm('请问确认删除吗？');
  if (f) {
    //2.发送网络请求
    axios({
      url: '/api/Tests/Del',
      method: 'delete',
      params: {
        ids: id,
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('删除成功');
          //3.刷新列表
          getTestList();
          //4.展示数据库
        } else {
          alert('删除失败');
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//批量删除
const delAll = () => {
  //1.友好提示 （1.必选 2.确认是否删除）
  if (ids.value.length == 0) {
    alert('必选一项');
    return;
  }
  let f = confirm('请问确认删除吗');
  if (f) {
    //2.发送网络请求
    axios({
      url: '/api/Tests/Del',
      method: 'delete',
      params: {
        ids: ids.value.toString(),
      },
    })
      .then((res) => {
        console.log(res);
        if (res.data > 0) {
          alert('删除成功');
          //3.刷新列表
          checked.value = false;
          getTestList();
          //4.展示数据库
        } else {
          alert('删除失败');
          checked.value = false;
          return;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};

//全选与全不选
const checkAll = () => {
  //1.先知道自己选中还是未选中
  checked.value = !checked.value;

  //2.当为true的时候将data.list中和id放到ids中 如果为false ids为[]空数组
  if (checked.value == true) {
    ids.value = data.list.map((item: any) => {
      return item.Id;
    });
  } else {
    ids.value = [];
  }
};
//重置
const reset = () => {
  info.workName = '';
  info.code = '';
  info.state = '';
};

//分页
const goPage = (num: any) => {
  if (num < 1) {
    info.pageIndex = 1;
    return;
  }

  if (num > data.totalPage) {
    info.pageIndex = data.totalPage;
    return;
  }

  info.pageIndex = num;
  getTestList();
};

const show = () => {
  info.pageIndex = 1;
  getTestList();
};

const getTestList = () => {
  axios({
    url: '/api/Tests/GetTestModel',
    method: 'get',
    params: info,
  })
    .then((res) => {
      console.log(res);
      Object.assign(data, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped>
span {
  margin: 0 10px;
}
b {
  color: rgb(253, 5, 5);
}
</style>
